<template>
    <div class="header">
        <div class="left-box">
            <!-- <a-button
                type="text"
                @click="toggleCollapsed"
            >
                <MenuUnfoldOutlined v-if="collapsed" />
                <MenuFoldOutlined v-else />
            </a-button> -->
            <!-- <div class="breadcrumb">
                <a-breadcrumb :routes="routes">
                    <template #itemRender="{ route, paths }">
                        <span v-if="routes.indexOf(route) === routes.length - 1">
                            {{ route.breadcrumbName }}
                        </span>
                        <router-link v-else :to="`${basePath}/${paths.join('/')}`">
                            {{ route.breadcrumbName }}
                        </router-link>
                    </template>
                </a-breadcrumb>
            </div> -->
        </div>
        <div class="right-box">
            <div class="user">
                <a-avatar src="/src/assets/images/cat.jpg" class="avatar" />
                <a-dropdown class="userName">
                    <a class="ant-dropdown-link" @click.prevent style="color: rgba(0, 0, 0, 0.85)">
                        Leungyh
                        <DownOutlined />
                    </a>
                    <template #overlay>
                    <a-menu>
                        <a-menu-item>
                            <a @click="changePwd">修改密码</a>
                        </a-menu-item>
                        <a-menu-item>
                            <a @click="loginOut">注销</a>
                        </a-menu-item>
                    </a-menu>
                    </template>
                </a-dropdown>
            </div>
            <SettingOutlined />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { defineComponent, ref, toRefs, watch, reactive } from "vue"
import { useRouter } from 'vue-router'
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    DownOutlined,
    SettingOutlined
} from "@ant-design/icons-vue";
import { log } from "console";
interface Route {
    path: string;
    breadcrumbName: string;
    children?: Array<{
        path: string;
        breadcrumbName: string;
    }>;
}

const basePath = "/components/breadcrumb"
const router = useRouter()
const siderDatas = JSON.parse(window.sessionStorage.getItem("siderDatas"))
const routes = siderDatas.dt.map((item)=>{
    return{
        path: item.router,
        breadcrumbName: item.title
    }
})
const datas = siderDatas.dt

const state = reactive({
    collapsed: false,
    selectedKeys: ["1"],
    openKeys: ["sub1"],
    preOpenKeys: ["sub1"],
})

watch(
    () => state.openKeys,
    (val, oldVal) => {
        state.preOpenKeys = oldVal
    }
)

const toggleCollapsed: ()=> void = () => {
    state.collapsed = !state.collapsed
    state.openKeys = state.collapsed ? [] : state.preOpenKeys
    context.emit('siderShow', state.collapsed)
};

// 修改密码
const changePwd: ()=> void = () => {
    console.log('未开发');
}

// 注销
const loginOut: ()=> void = () => {
    window.sessionStorage.clear()
    router.push({ name: 'Login' })
}


defineExpose({
  ...toRefs(state)
})

</script>

<style>
.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
}
.header .left-box{
    display: flex;
    flex-direction: row;
}
.header .left-box{
    display: flex;
    flex-direction: row;
}
.btn{
    display: inline-block;
    margin-right: 15px;
}
.breadcrumb{
    display: inline-block;
}
.breadcrumb .ant-breadcrumb{
    font-size: 16px;
}
.user{
    display: inline-block;
    margin: 0 10px;
}
.user .avatar{
    margin-right: 10px;
}
.user .userName{
    display: inline-block;
    height: 32px;
    line-height: 32px;
}
</style>
